<!-- src/components/Task/TaskSidebar.vue -->
<template>
  <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
    <div class="sidebar-content">
      <el-button class="create-btn" @click="$emit('add-new-task')" type="primary">
        <el-icon><Plus /></el-icon>
        新建任务
      </el-button>

      <div class="task-categories">
        <div class="category-item active">
          <span>所有任务</span>
        </div>
        <div class="category-item">
          <span>已加星标</span>
        </div>

        <div class="dropdown-container">
          <div class="dropdown-header" @click="$emit('update:is-task-list-open', !isTaskListOpen)">
            <span class="category-title">任务列表</span>
            <el-icon :class="{ 'rotate': isTaskListOpen }"><ArrowDown /></el-icon>
          </div>

          <div class="dropdown-content" v-if="isTaskListOpen">
            <div
                class="category-item with-count"
                v-for="(list, index) in taskLists"
                :key="list.id"
                @click="handleCategoryClick(index, $event)"
                :class="{ active: activeListIndex === index, disabled: !list.visible }"
            >
              <el-checkbox
                  v-model="list.visible"
                  class="visibility-checkbox"
                  @click.stop="handleVisibilityChange(index)"
                  :aria-label="`显示${list.name}`"
              />
              <span>{{ list.name }}</span>
              <span class="count">{{ list.tasks.length }}</span>
            </div>

            <div class="add-category" @click="$emit('update:show-new-list-dialog', true)">
              <el-icon><Plus /></el-icon>
              <span>新建任务列表</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
</template>

<script lang="ts" setup>
import { Plus, ArrowDown } from '@element-plus/icons-vue'

defineProps<{
  taskLists: any[]
  activeListIndex: number
  isTaskListOpen: boolean
  showNewListDialog: boolean
  sidebarCollapsed: boolean // 新增接收父组件的折叠状态
}>()

const emit = defineEmits<{
  (e: 'update:is-task-list-open', val: boolean): void
  (e: 'update:show-new-list-dialog', val: boolean): void
  (e: 'handle-category-click', index: number, event: MouseEvent): void
  (e: 'handle-visibility-change', index: number): void
  (e: 'add-new-task'): void
}>()

const handleCategoryClick = (index: number, event: MouseEvent) => {
  emit('handle-category-click', index, event)
}

const handleVisibilityChange = (index: number) => {
  emit('handle-visibility-change', index)
}
</script>

<style scoped>
/* 复用原样式 */
.sidebar {
  width: 280px;
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  transition: width 0.3s ease;
  overflow-y: auto;
}

.sidebar.collapsed {
  width: 0;
  overflow: hidden;
}

.sidebar-content {
  padding: 20px;
}

.create-btn {
  width: 100%;
  margin-bottom: 24px;
  background: #1976d2;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.task-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-item {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-weight: 500;
}

.category-item.active {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: 500;
}

.category-item:hover:not(.active):not(.disabled) {
  background: #f0f0f0;
}

.category-item.disabled {
  color: #999;
  cursor: not-allowed;
  opacity: 0.7;
}

.category-title {
  margin: 0;
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.dropdown-container {
  margin-top: 8px;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.dropdown-header .el-icon {
  transition: transform 0.3s ease;
  font-size: 16px;
  color: #666;
}

.dropdown-header .rotate {
  transform: rotate(180deg);
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.add-category {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  color: #333;
  cursor: pointer;
  margin-top: 8px;
}

.add-category:hover {
  background: #f0f0f0;
}

.count {
  background: #e0e0e0;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  color: #666;
}

.visibility-checkbox {
  margin-right: 8px;
  transition: transform 0.2s ease;
}

.visibility-checkbox:hover {
  transform: scale(1.1);
}

.category-item.with-count {
  align-items: center;
}
</style>